{% extends "layout/manage.html" %}
{% load static %}

{% block title %}
    wiki
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static "plugin/editor-md/css/editormd.min.css" %}">
    <style>
        .panel-default {
            margin-top: 10px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-body {
            padding: 0;
        }

        .title-list {
            border-right: 1px solid #dddddd;
            min-height: 500px;
        }

        .title-list ul {
            padding-left: 15px;
        }

        .title-list ul a {
            display: block;
            padding: 5px 0;
        }

        .content {
            border-left: 1px solid #dddddd;
            min-height: 600px;
            margin-left: -1px;
        }

        /* 设置markdown 全屏的置顶图层 */
        .editormd-fullscreen {
            z-index: 1001;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div>
                    <a href="{% url "wiki" project_id=request.tartec.project.id %}"><i class="fa fa-book"
                                                                                       aria-hidden="true"></i>
                        wiki文档</a>
                </div>
            </div>
            <div class="row">
                <div class="panel-body">
                    <div class="col-sm-3 title-list">
                        <ul id="catalog">

                        </ul>
                    </div>
                    <div class="col-sm-9 content">
                        <div>

                            <form action="" method="post">
                                {% csrf_token %}
                                {% for item in form %}
                                    {% if item.name == "content" %}
                                        <div class="form-group">
                                            <lable for="{{ item.id_for_label }}">{{ item.label }}</lable>
                                            <div id="editor">
                                                {{ item }}
                                            </div>
                                            <span class="error_msg">{{ item.errors.0 }}</span>
                                        </div>
                                    {% else %}
                                        <div class="form-group">
                                            <lable for="{{ item.id_for_label }}">{{ item.label }}</lable>
                                            {{ item }}
                                            <span class="error_msg">{{ item.errors.0 }}</span>
                                        </div>
                                    {% endif %}

                                {% endfor %}
                                <button id="onSubmit" type="submit" class="btn btn-primary">提 交</button>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static "plugin/editor-md/editormd.min.js" %}"></script>
    <script>
        var WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.tartec.project.id  %}"
        var WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.tartec.project.id  %}"
        $(() => {
            isCatalog();
            initEditorMd();
            isOnSubmit();
        })

        /*
        初始化markdown 编辑器
        * */
        function initEditorMd() {
            editormd('editor', {
                // 输入框中的默认提示
                placeholder: "请输入内容",
                // 默认行高
                height: 500,
                // 需要设置配置文件的路径
                path: "{% static 'plugin/editor-md/lib/' %}",
                // 设置是否能上传图片
                imageUpload: true,
                // 设置可以上传图片的文件后缀
                imageFormats: ["jpg", 'jpeg', 'png', 'gif'],
                //  上传图片的地址
                imageUploadURL: WIKI_UPLOAD_URL
            })
        }

        function isCatalog() {
            $.ajax({
                url: "{% url "wiki_catalog" project_id=request.tartec.project.id %}",
                type: "JSON",
                method: "GET",
                success: (res) => {
                    if (res.status) {
                        console.log(res)
                        $.each(res.data, (index, item) => {
                            // 在页面添加一个li 标签添加一个id 属性 id_数据库里面的id
                            // 在li标签里面添加一个a 标签，文本信息是数据库里面的title
                            // 在li标签里面再添加一个ul 标签，方便后续的添加li
                            let href = WIKI_DETAIL_URL + "?wiki_id=" + item.id
                            var li = $("<li>").attr("id", "id_" + item.id).append($("<a>").text(item.title).attr("href", href)).append($("<ul>"))
                            if (!item.parent_id) {
                                // 找到id=catalog的标签，在里面添加上述的li
                                $("#catalog").append(li)
                            } else {
                                // 找到id=id_数据库中的parend_id，在标签下的子标签ul 当中添加ul
                                $("#id_" + item.parent_id).children("ul").append(li)
                            }
                        })
                    } else {
                        alert("初始化目录失败")
                    }
                }
            })
        }

        function isOnSubmit() {
            $("#onSubmit").click(function () {
                $.ajax({
                    url: "{% url "add_wiki" project_id=request.tartec.project.id %}",
                    type: "POST", // 请求方法为POST
                    data: $("#form").serialize(), // 提交的表单数据，通过序列化获取
                    dataType: "JSON", // 返回的数据类型为JSON
                    success: function (res) { // 请求成功后的回调函数
                        console.log(res) // 打印返回的数据
                        if (res.status) { // 如果返回的状态为true
                            location.href = location.href // 重新加载当前页面
                            // location.reload() 两个都是刷新一下页面，可以把创建的项目显示到页面
                        } else { // 如果返回的状态为false
                            $.each(res.error, function (key, value) { // 遍历错误信息
                                $("#id_" + key).next().text(value[0]) // 将错误信息展示在对应字段的下一个兄弟元素上
                            })
                        }
                    }

                })
            })
        }
    </script>
{% endblock %}